<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.jOrgChart.js"></script>
<script type="text/javascript">
function _onBlurTextfield(event){
	var elem = $(event.target);
	var elemValue = elem.val();
	//alert(elemValue);
	elem.hide();
	var p = elem.parent(".node");
	var c = p.index(".node");
	$('ul#org li').eq(c).find('label').eq(0).html(elemValue); // set label text in ul to the new value of textfield
	($('ul#org li').eq(c).find('input[type="text"]').eq(0)).attr('value',elemValue); // copy the value of textfield in table to one in ul
	p.find('label').html(elemValue).show();
}
function _onClickLabel(event){
	var elem = $(event.target);
	elem.hide();
	var p = elem.parent(".node");
	p.find('input[type="text"]').show();
}
function deleteLeafNode(obj){ // obj is the delete link object
	var c = $(obj).closest('td.node-cell').index('.node-cell');
    if(confirm('Are you sure, you want to delete the department?')){
	  $('ul#org li').eq(c).remove();
	  refreshChart();
	}	  
}
function init(){
	$("#org").jOrgChart({chartElement : '#my-chart-container'});
	$('.jOrgChart .node').css({'width':'120px','height':'50px','background-color':'#fff','color':'#000'});
	$('.jOrgChart .node').off(); // remove all event handlers to avoid the collapse on click the node

	$('.jOrgChart .node > label').bind('click',_onClickLabel).css({'display':'block'});
	$('.jOrgChart .node > input[type="text"]').bind('blur',_onBlurTextfield).hide();
}
function refreshChart(){
	 $('.jOrgChart').remove();
	 init();
}
</script>
<link type="text/css" rel="stylesheet" href="css/jquery.jOrgChart.css" />
<!--<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/custom.css" />
<link type="text/css" rel="stylesheet" href="css/prettify.css" />-->

<style type="text/css">
div.jOrgChart > table {
	margin: auto;
}
div.jOrgChart table {
	border-collapse: collapse;
}
.jOrgChart .node {
	/* box shadow */
	-moz-box-shadow: 0 0 1px #aaa;
	-webkit-box-shadow: 0 0 1px #aaa;
	box-shadow: 0 0 1px #aaa;
	/* general css rules */
	background: #FFF;
	border: 1px solid #666;
	/*border-radius: 5px;*/
	/* center the text vertically and horizontally */
	text-align: center;
	vertical-align: middle;
	/* fallback for non-Flexbox browsers */
	display: inline-block;
	/* Flexbox browsers */
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	/* vertical centering for legacy, horizontal centering for modern */
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	/* modern Flexbox only */
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	/* legacy Flexbox only */
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
}
.jOrgChart .line {
	width: 2px;
	border-color: #666;
}
.jOrgChart .top, .jOrgChart .right, .jOrgChart .left {
	border-width: 2px;
	border-color: #666;
}
.jOrgChart .down {
	background-color: #666
}
.jOrgChart .node input[type="text"] {
}
</style>
<title>jOrgChart Sample_Editable Chart</title>
</head>

<body>
<ul id="org" style="display:none">
  <li>
    <label>الإدارة العامة بالشركة المتحدة للطيران</label>
    <input type="text" name="x" value="الإدارة العامة بالشركة المتحدة للطيران" />
    <ul>
      <li>
        <label>dep1.1</label>
        <input type="text" name="x" value="dep1.1" />
        <a href="javascript:void(0)" onclick="deleteLeafNode(this)"><img src="images/red-delete-button.jpg" width="20" style="float:right" /></a> </li>
      <li>
        <label>dep1.2</label>
        <input type="text" name="x" value="dep1.2" />
        <ul>
          <li>
            <label>dep1.2.1</label>
            <input type="text" name="x" value="dep1.2.1" />
          </li>
          <li>
            <label>dep1.2.2</label>
            <input type="text" name="x" value="dep1.2.2" />
            <ul>
              <li>
                <label>dep1.2.2.1</label>
                <input type="text" name="x" value="dep1.2.2.1" />
              </li>
              <li>
                <label>dep1.2.2.2</label>
                <input type="text" name="x" value="dep1.2.2.2" />
              </li>
              <li>
                <label>dep1.2.2.3</label>
                <input type="text" name="x" value="dep1.2.2.3" />
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <label>dep1.3</label>
        <input type="text" name="x" value="dep1.3" />
      </li>
      <li>
        <label>dep1.4</label>
        <input type="text" name="x" value="dep1.4" />
        <ul>
          <li>
            <label>dep1.4.1</label>
            <input type="text" name="x" value="dep1.4.1" />
          </li>
          <li>
            <label>dep1.4.2</label>
            <input type='text' name='x' value='dep1.4.2' />
          </li>
          <li>
            <label>dep1.4.3</label>
            <input type="text" name="x" value="dep1.4.3" />
          </li>
        </ul>
      </li>
      <li>
        <label>dep1.5</label>
        <input type="text" name="x" value="dep1.5" />
        <a href='javascript:void(0)' onclick='deleteLeafNode(this)'><img src='images/red-delete-button.jpg' width='20' style='float:right' /></a> </li>
    </ul>
  </li>
</ul>
<form method="get">
  <div id="my-chart-container"> </div>
  <input type="submit" value="apply changes" />
</form>
<script type="text/javascript">
$(function() {
   // $('ul#org li > a').bind('click',deleteLeafNode);
	init();
   // $("#org").jOrgChart({chartElement : '#my-chart-container'}); ;
   // $('.jOrgChart .node').css({'width':'120px','height':'50px','background-color':'#fff','color':'#000'});
   // $('.jOrgChart .node').off(); // remove all event handlers to avoid the collapse on click the node

   // $('.jOrgChart .node > label').bind('click',_onClickLabel).css({'display':'block'});
   // $('.jOrgChart .node > input[type="text"]').bind('blur',_onBlurTextfield).hide();
	
   // $('.jOrgChart .node > a').bind('click',deleteLeafNode);
   // $('ul#org li > a').bind('click',deleteLeafNode);
});

//var img=new Image; 
//img.src = $('#org').toDataURL(); 
//document.body.appendChild(img);
</script>
</body>
</html>
